<template>
	<view class="flex-col page">
		<view class="flex-row items-center cibsb">
			<image @click="gobacks" class="image" src="/static/dazi/bak.png" mode=""></image>

			<view class="lest">
				<view class="etagw " v-for="(item,index) in tablist" :key="index"
					:class=" tadouble ==index?'active':'' " @click="changtab(index)">
					{{item}}
				</view>

			</view>
			<view class="">
				
			</view>

		</view>
		
		<view class="cljek">
			<view class="mansk">
				<image src="/static/acti/2.webp" mode="heightFix"></image>
				<image src="/static/acti/2.webp" mode="heightFix"></image>
				<image src="/static/acti/2.webp" mode="heightFix"></image>
				<image src="/static/acti/2.webp" mode="heightFix"></image>
				
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tadouble: 0,
				tablist: ['相册', '视频'],

			}
		},
		methods: {
			gobacks() {
			
				// #ifdef H5
				history.back();
				// #endif
			
				// #ifdef APP
				uni.navigateBack()
				// #endif
			
			},
			changtab(i) {
				this.tadouble = i
			},

		}
	}
</script>

<style lang="scss">
	.cljek{
		margin: 30rpx 0;
	}
	.mansk{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		image{
			width: 250rpx;
			margin-bottom: 30rpx;
			border-radius: 30rpx;
		}
	}
	.cibsb{
		display: flex;
		align-items: center;
		justify-content: space-between !important;
	}
	.lest {
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.active {
font-weight: bold;
		color: #2A222F !important;
		font-size: 40rpx !important;

		position: relative;
		display: inline-block;
	}

	.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		/* 调整此值以改变下划线与文本之间的距离 */
		left: 50%;
		/* 将起点设为文本的中间 */
		width: 50%;
		/* 根据实际需要调整宽度，这里是相对于文本容器的宽度 */
		height: 8rpx;
		/* 下划线的厚度 */
		border-radius: 50rpx;
		background: #FB75D6;
		/* 下划线的颜色 */
		transform: translateX(-50%);
		/* 将下划线向左移动其自身宽度的一半，使其居中 */
	}

	.etagw {
		margin-right: 40rpx;
		color: #2A222F;
		font-size: 32rpx;
	}

	.tabegr {
		padding: 30rpx 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.page {
		padding: 100rpx 30rpx 68rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		width: 48rpx;
		height: 48rpx;
	}
</style>